<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word Pronunciation</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <div>
        <h2>Word: {{ word }}</h2>
        <button @click="playAudio">Play Pronunciation</button>
    </div>
    <audio ref="audioPlayer" controls style="display: none;"></audio> <!-- 隐藏的音频播放器 -->
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            word: 'Hello',  // 展示的单词
            audioUrl: null,  // 用于存储音频URL
        },
        methods: {
            playAudio() {
                const _this = this;

                // 假设服务器URL返回音频
                const audioApiUrl = 'http://dict.youdao.com/dictvoice?type=2&audio=' + this.word;  // 替换为实际的API


                axios.get(audioApiUrl, {
                    responseType: 'blob'  // 将响应数据设置为 Blob
                })
                    .then(function (response) {
                        const blob = response.data;
                        _this.audioUrl = URL.createObjectURL(blob);  // 将 Blob 转换为 URL

                        // 设置 audio 元素的 src 为音频URL
                        _this.$refs.audioPlayer.src = _this.audioUrl;
                        _this.$refs.audioPlayer.play();  // 播放音频
                    })
                    .catch(function (error) {
                        console.error('音频获取失败', error);
                    });
            }
        }
    });
</script>
</body>
</html>